<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理系统大布局 - Layui</title>
    <link rel="stylesheet" href="/static/css/layui/css/layui.css">
    <style>
        #avatarFile {
            outline: 0;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .btn {
            color: #0000AA;
            text-decoration: none;
        }

        .green {
            color: green;
        }

        .red {
            color: tomato;
        }

        .gray {
            color: gray;
        }

        td {
            text-align: center;
        }

        .wen {
            font-size: 16px;
            outline: none;
            border: none;
            width: 100px;
            height: 30px;
            /* border-radius: 20px; */
            margin-bottom: 30px;
            color: white;
            background-color: skyblue;
            cursor: pointer;
        }

        .hui {
            text-decoration: none;
            color: white;
        }

        img {
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <h1 style="text-align:center;">博客列表</h1>
    <h2 style="text-align:center;">欢迎你：{{userInfo.username}},上一次登入时间：{{userInfo.last_login_date | dealDate
        'YYYY-MM-DD'}}</h2>
    <div class="photo">
        <button id="updAvatar">更改头像</button>
        <input type="file" id="avatarFile" style="display:none;">
        <img src="{{userInfo.avatar}}" alt="" id="preview">
    </div>
    <div style="text-align:center;padding:30px;">
        <button id="addBtn">添加博客</button>
        <a href="/recyclelist">回收站列表</a>
        <a href="/addImg">单文件上传</a>
        <a href="javascript:;" onclick="logout()">退出</a>
    </div>
    <div>
        <div>
            <table width='1300px' ; text-align=center; rules='all' class="layui-table">
                <tr>
                    <td>序号</td>
                    <td width="200px">标题</td>
                    <td>所属分类</td>
                    <td>图片</td>
                    <td>作者</td>
                    <td>内容</td>
                    <td>状态</td>
                    <td>添加时间</td>
                    <td>修改时间</td>
                    <td>操作</td>
                </tr>
                <!-- 0发布1未发布2审核中 -->
                {{each articles item index}}
                <tr>
                    <td>{{index + 1}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.cate_name}}</td>
                    <td><img src="/{{item.img}}" margin=" 0px auto" alt=""></td>
                    <td>{{item.author}}</td>
                    <td>
                        <a href="/detail?id={{item.id}}">查看详情</a>
                        <button class="layui-btn layui-btn-sm showContent" data-item="{{item}}">查看全文</button>
                    </td>
                    <td>
                        <!-- {{if item.status == 0}}
                        <span class="green">已发布</span>
                        {{else if item.status ==1}}
                        <span class="red">未发布</span>
                        {{else}}
                        <span class="gray">审核中</span>
                        {{/if}} -->
                        {{@
                        item.status_text
                        }}
                    </td>
                    <td>{{item.add_time | dateFormat 'YYYY-MM-DD'}}</td>
                    <td>{{item.update_time | dateFormat 'YYYY-MM-DD'}}</td>
                    <td>
                        <a href="/edit?id={{item.id}}" class="layui-btn  layui-btn-sm">编辑</a>
                        <a href="javascript:;" onclick="confirmDelete('{{item.id}}','{{item.img}}');"
                            class="layui-btn  layui-btn-sm layui-btn-danger">永久删除</a>
                        <a href="/recycle?id={{item.id}}" onclick="return confirm('确实加入回收站');"
                            class="layui-btn  layui-btn-sm  layui-btn-warm">加入回收站</a>
                        <a href="javascript:void(0)" onclick="ajaxDelete(this,'{{item.id}}','{{item.img}}')"
                            class="layui-btn  layui-btn-sm layui-btn-danger">ajax永久删除</a>
                    </td>
                </tr>
                {{/each}}
            </table>
        </div>
    </div>

    <!-- <div class="layui-footer">
            底部固定区域
        </div> -->
    </div>
    <script src="/static/js/jquery.js"></script>
    <script src="/static/plugins/layui/layui.js"></script>
    <script>
        //JS 

        $("tr:even").css("background-color", 'skyblue');
        document.getElementById('addBtn').onclick = function () {
            location.href = '/add'
        }
        // 退出
        function logout() {
            if (confirm('确认退出吗')) {
                location.href = "/logout"
            }
        }

        function confirmDelete(id, img) {

            let result = layer.confirm('你真的要永久删除它吗，数据不可恢复', {
                btn: ['是', '否'],
                shadeClose: true,
                //第一个透明度,第二个是背景颜色
                shade: [0.5, '#ccc']
            }, () => {
                //确认触发
                location.href = "/delete?id=" + id + "&img" + img;
            }, () => {
                //  layer.msg("编辑失败",{icon:2});
                layer.msg('取消删除')
            });


        }
        //ajax异步永久删除
        function ajaxDelete(ele, id, img) {
            layer.confirm('是否删除？', {
                btn: ['是', '否'],
                shadeClose: true,
                //第一个透明度,第二个是背景颜色
                shade: [0.5, '#ccc']
            }, () => {
                //确认触发
                // location.href = "/delete?id=" + id + "&img" + img;
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4 && this.status === 200) {
                        let data = JSON.parse(this.responseText);
                        let { code, message } = data;
                        if (code === 20000) {
                            // 删除成功,删除当前tr行
                            $(ele).parents('tr').remove()
                            setTimeout(function () {
                                layer.msg('删除成功', { icon: 1 })
                            }, 500)

                            layer.closeAll();
                        } else if (code === 30004) {
                            layer.msg(message)
                            location.href = "/login"
                        } else {
                            layer.msg('删除失败')
                        }
                    }
                }
                xhr.open('post', '/ajaxdelete', true)
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
                xhr.send("id=" + id + "&img=" + img + "&flag=ajax")

            }, () => {
                layer.msg('否')
            });
        }


        let avatarFile = document.getElementById("avatarFile")
        let preview = document.getElementById('preview')
        document.getElementById("updAvatar").onclick = function () {
            avatarFile.click();
        }
        avatarFile.onchange = function () {
            let file = this.files[0];
            if (!file) {
                return;
            }
            let formData = new FormData();
            formData.append('avatar', file);

            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    let data = JSON.parse(this.responseText)
                    let { message, code, src } = data
                    layer.msg(message)
                    preview.src = '/' + src;
                }
            }
            xhr.open('post', '/uploadAvatar', true)
            xhr.send(formData)
        }


    </script>
</body>

</html>